<template>
	<div class="flex">
		<div class="e-flex-1">
			<div class="container">
				<el-page-header @back="goBack" content="撰写文章"></el-page-header>
				<div class="flex">
					<div class="e-flex-1">
						<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="views-form">
							<el-form-item label="文章标题" prop="title">
								<el-input v-model="form.title" placeholder="请输入标题"></el-input>
							</el-form-item>
							<el-form-item label="文章类型" prop="newsTypeId" > 
								<el-select v-model="form.newsTypeId" placeholder="请选择">
									<el-option v-for="item in newsTypeList" :key="item.id" :label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="作者" prop="author">
								<el-input v-model="form.author" placeholder="请输入文章作者"></el-input>
							</el-form-item>
							<el-form-item label="来源" prop="source">
								<el-input v-model="form.source" placeholder="请输入文章的来源"></el-input>
							</el-form-item>
							<el-form-item label="内容" prop="context">
								<Tinymce ref="editor" v-model="form.context" :height="300"></Tinymce>
							</el-form-item>
							<el-form-item label="是否隐藏" prop="isHide">
								<el-switch v-model="form.isHide" :active-value="'是'" :inactive-value="'否'"></el-switch>
							</el-form-item>
							<div class="flex">
								<div>
									<el-form-item label="上传封面">
										<el-upload class="avatar-uploader" :headers="headers" :action="fileUploadURL"
											accept=".jpg,.png" :show-file-list="false" :on-success="handleFilesSuccess"
											:on-progress="handleProgress" :on-error="handleError">
											<img v-if="form.coverPhoto" :src="fileURL + form.coverPhoto" class="avatar">
											<div class="avatar-uploader-icon" v-else>
												<div><i class="el-icon-plus"></i></div>
												<div class="e-font-14">上传图片</div>
											</div>
										</el-upload>
										<div class="tips">建议上传尺寸比例为750*524 </div>
									</el-form-item>
								</div>
								<div>
									<el-form-item label="分享图">
										<el-upload class="avatar-uploader" :headers="headers" :action="fileUploadURL"
											accept=".jpg,.png" :show-file-list="false" :on-success="handleFilesSuccess2"
											:on-progress="handleProgress" :on-error="handleError">
											<img v-if="form.sharePhoto" :src="fileURL + form.sharePhoto" class="avatar">
											<div class="avatar-uploader-icon" v-else>
												<div><i class="el-icon-plus"></i></div>
												<div class="e-font-14">上传图片</div>
											</div>
										</el-upload>
										<div class="tips">建议上传尺寸比例为500*400 </div>
									</el-form-item>
								</div>
							</div>
							<el-form-item label="文件上传">
								<!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
									:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
									multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
									<el-button size="small" type="primary">点击上传</el-button>
									<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
								</el-upload> -->
								<div class="files-list">
									<div class="item" v-for="(item, index) in form.newsDetailFile" :key="index">
										<span class="icon">
											<span class="ext">{{ utils.getFileExt(item.savename).toUpperCase() }}</span>
											<i class="iconfont icon-DOCXtubiao"></i>
										</span>
										<div class="text">
											<div class="tl">{{ item.name }}</div>
											<span class="size">{{ utils.formatSize(item.size) }}</span>
										</div>
										<span class="el-icon-download e-p-15"
											@click.stop="previewFiles(fileURL + item.savename)"></span>
										<span class="el-icon-error err" @click.stop="delFile(index)"></span>
									</div>
									<div class="">
										<el-upload :headers="headers" :action="fileUploadURL" :show-file-list="false"
											:before-upload="beforeFilesUpload" :on-success="handleFilesSuccess3"
											:on-progress="handleProgress" :on-error="handleError" :auto-upload="true">
											<el-button class="e-flex-1 item upload el-btn" slot="trigger" size="small"
												:loading="loading">
												<i class="el-icon-paperclip"></i>上传附件
											</el-button>
										</el-upload>
									</div>
								</div>
							</el-form-item>
							<el-form-item label="文章摘要">
								<el-input type="textarea" v-model="form.shortMark" :rows="5" placeholder="请输入内容">
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button @click="goBack">返回</el-button>
								<el-button type="primary" @click="onSubmit()">保存</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<div class="e-w-450">
			<div class="container e-m-l-15" style="height:100%">
				<div class="section-head">
					<div class="e-flex-1"><span class="blue-span"></span>发布设置</div>
				</div>
				<div class="public-list">
					<div class="public-item e-m-t-20 border-none">
						<div class="public-item-content">
							<el-button type="primary" @click="onSubmit()" size="mini">保存</el-button>
							<el-button size="mini">预览</el-button>
						</div>
					</div>
					<div class="public-item">
						<div class="public-item-content">
							<div class="public-item-title">查看权限</div>
							<el-form ref="settingForm" :model="form" :rules="rules" label-width="auto">
								<el-form-item label="是否公开信息：">
									<el-switch v-model="form.isOpen" :active-value="'是'" :inactive-value="'否'"></el-switch>
									<div class="tips e-font-12"><i
											class="el-icon-info"></i>开启后全部会员可见（包括后续新增的组织架构、会内职务的会员）</div>
								</el-form-item>
								<!-- <el-form-item label="职务需求：">
									<el-cascader :options="options" :props="props" collapse-tags clearable>
									</el-cascader>
									<div class="tips e-font-12"><i class="el-icon-info"></i>设置特定的组织架构、会内职务可见</div>
								</el-form-item> -->
								<el-form-item label="是否草稿：">
									<el-switch v-model="form.isNoteBook" :active-value="'是'" :inactive-value="'否'"></el-switch>
								</el-form-item>
							</el-form>
						</div>
					</div>
					<!-- <div class="public-item">
						<div class="public-item-content">
							<div class="public-item-title">文章参数</div>
						</div>
					</div> -->
					<div class="public-item">
						<div class="public-item-content">
							<div class="flex align-items-center">
								<div class="e-flex-1">
									<div class="public-item-title">评论开关</div>
								</div>
								<div class="e-p-t-14">
									<el-switch v-model="form.IsComment" :active-value="'是'" :inactive-value="'否'"></el-switch>
								</div>
							</div>
						</div>
					</div>
					<div class="public-item">
						<div class="public-item-content">
							<div class="public-item-title">标签</div>
							<div class="tips e-font-12 e-m-b-10"><i class="el-icon-info"></i>建议标签最多不超过5个</div>
							<el-select v-model="form.newsTag" multiple filterable :multiple-limit="5" placeholder="请选择标签" value-key="id" @change="changeSelect">
								<el-option v-for="item in tagList" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	data() {
		return {
			loading:false,
			form: {
				id: 0,
				newsTypeId: '',
				title: "",
				coverPhoto: "",
				context: "",
				isHide: "否",
				orderBy: 0,
				sharePhoto: "",
				shortMark: "",
				isOpen: "是",
				isNoteBook: "否",
				newsTag: "",
				isComment: "否",
				newsDetailFile: [],
				author:'',
				source:'',
			},
			newsTypeList: [],
			rules: {
				title: [
					{ required: true, message: '请输入标题', trigger: 'blur' },
				],
				newsTypeId: [
					{ required: true, message: '请选择分类', trigger: 'change' }
				],
				enddate: [
					{ required: true, message: '请输入截止时间', trigger: 'blur' },
				],
				context: [
					{ required: true, message: '请输入内容', trigger: 'blur' },
				],
				author: [
					{ required: true, message: '请输入作者', trigger: 'blur' },
				],
				source: [
					{ required: true, message: '请输入文章的来源', trigger: 'blur' },
				]
			},
			props: { multiple: true },
			tagList: []
		}
	},
	computed: {
		headers() {
			return this.$store.state.header
		}
	},
	mounted() {
		this.getTypeList()
		this.getTagList()
	},
	methods: {
		goBack() {
			this.$router.go(-1)
		},
		getTypeList() {
			this.$axios.post('/select/NewsTypeList', {
				"PageIndex": 1,
				"PageSize": 9999,
				"Key": ''
			}).then((res) => {
				this.newsTypeList = res.rows;
			})
		},
		getTagList() {
			this.$axios.post('/select/NewsTagList/NewsTagList', {
				"PageIndex": 1,
				"PageSize": 9999,
				"Key": ''
			}).then((res) => {
				this.tagList = res.rows;
			})
		},
		onSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					if(Array.isArray(this.form.newsTag)){
						this.form.newsTag = this.form.newsTag.join(',')
					}
					this.$axios.post('/NewsDetail/create', this.form).then((res) => {
						this.$message.success(res.msg);
						// setTimeout(() => {
							this.goBack()
						// }, 1000)
					})
				} else {
					return false;
				}
			})
		},
		beforeFilesUpload(file) {
			const isSize = file.size / 1024 / 1024 < 10;
			if (!isSize) {
				this.$message.error('上传文件大小不能超过 10MB!');
			}
			return isSize;
		},
		handleProgress(event, file, fileList) {
			this.loading = true
			// console.log(event)
		},
		handleError(event, file, fileList) {
			this.loading = false
			this.$message.error('文件上传失败');
		},
		handleFilesSuccess(res, file) {
			if (file.status === "success") {
				this.loading = false
				this.form.coverPhoto = res.path
			}
		},
		handleFilesSuccess2(res, file) {
			if (file.status === "success") {
				this.loading = false
				this.form.sharePhoto = res.path
			}
		},
		handleFilesSuccess3(res, file) {
			if (file.status === "success") {
				this.loading = false
				this.form.newsDetailFile.push({
					id: 0,
					savename: res.path,
					name: file.name,
					size: file.size
				});
			}
		},
		previewFiles(url) {
			window.open(url)
		},
		delFile(index) {
			this.form.newsDetailFile.splice(index, 1);
		},
		changeSelect(val){
			console.log(val)
		}
	}
}
</script>

<style lang="scss" scoped>
.public-list {
	.public-item {
		padding-bottom: 20px;
		border-top: 1px solid #f1f1f1;

		.public-item-title {
			font-size: 16px;
			font-weight: 500;
			color: #303133;
			line-height: 25px;
			text-shadow: 1px 0 20px rgba(0, 0, 0, .08);
			margin-bottom: 7px;
			padding: 20px 0 0;
		}
	}
}

.files-list {
	display: flex;
	flex-wrap: wrap;

	.item {
		display: flex;
		align-items: center;
		background: #fbfbfb;
		width: 360px;
		height: 35px;
		padding: 10px 15px;
		border-radius: 3px;
		margin-bottom: 15px;
		cursor: pointer;

		&:hover {
			background: var(--light);
		}

		&.upload {
			border: 1px solid var(--blue);
			background-color: #f7fbff;
			font-size: 14px;
			background: #ecf5ff;
			border-color: #b3d8ff;
			cursor: pointer;

			&:hover {
				background-color: var(--blue);

				.e-flex-1 {
					color: #fff;
				}
			}

			.e-flex-1 {
				color: #409EFF;
				text-align: center;


				&+.e-flex-1 {
					border-left: 1px solid #dcdcdc;
				}

				.el-icon-upload2 {
					font-weight: bold;
				}
			}

			&.el-btn {
				margin-top: 0;
				height: 54px;
				color: #409EFF;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 390px;

				&:hover {
					color: #fff;
				}
			}
		}

		&:first-child {
			margin-right: 15px;
		}

		&+.item {
			margin-right: 15px;
		}

		.icon {
			margin-right: 5px;

			.iconfont {
				font-size: 32px;
				color: var(--blue);
			}
		}

		.err {
			color: var(--red);

			&:hover {
				opacity: 0.8;
			}
		}

		.text {
			// padding-right: 30px;
			line-height: 1em;
			width: 70%;
			flex: 1;

			.tl {
				font-size: 14px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 260px;
			}

			.size {
				color: var(--grey);
				font-size: 12px;
			}
		}
	}
}
</style>
